<template>
  <div class="table-tasteorgan">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button type="warning" @click="stamp(0)" >
          打印
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-form ref="queryForm" :model="form"  >
          <el-select
            width="100%"
            v-if="options"
            v-model="form.checkInMark"
            filterable
            remote
            clearable
            reserve-keyword
            size="mini"
            style="width: 110%;"
            placeholder="请输入入住人姓名/证件号/助记码"
            :remote-method="remoteMethod"
            @change="change"
          >
            <el-option

              v-for="item in options"
              :key="item.checkInMark"
              :label="item.elderlyName"
              :value="item.checkInMark">

              <span style="float: left;width: 20%">姓名：{{ item.elderlyName }}</span>
              <span style="width: 30%;color: #8492a6;font-size: 13px" >房间：{{ item.checkInBed}}</span>
              <span style="width: 43%;float: right; color: #8492a6; font-size: 13px">证件号：{{ item.cardNo }}</span>
            </el-option>
          </el-select>
        </el-form>
        <el-date-picker
          style="width: 250px;margin-left: 50px"
          size="mini"
          align="right"
          @change="changetime"
          value-format="yyyy-MM-dd"
          v-model="value1"
          type="daterange"
          :unlink-panels="true"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>


        <el-button type="primary" style="margin-left: 10px" @click="searchTurnOverRecord(1,'')"  size="mini">条件查询</el-button>

      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="elderlyName"
        label="姓名"
        >
      </el-table-column>
      <el-table-column
        prop="nursingItemName"
        label="护理项目"
        >
      </el-table-column>
      <el-table-column
        prop="careTypeName"
        label="类型"
        >
      </el-table-column>

      <el-table-column

        label="执行时间"
      >
        <template slot-scope="scope" v-if="scope.row.actualExecutionTime ">
          {{scope.row.actualExecutionTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
        </template>
      </el-table-column>
      <el-table-column
        prop="executorName"
        label="执行人"
      >
      </el-table-column>
      <el-table-column
        prop="executorTypeName"
        label="执行人类型"
      >
      </el-table-column>
      <el-table-column
        prop="skinConditionName"
        label="皮肤状况"
      >
      </el-table-column>
      <el-table-column
        prop="lyingPositionName"
        label="卧位"
      >
      </el-table-column>

    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <div ref="print" class="mytables">
      <h3 style="text-align: center;">翻身记录</h3>
      <table style="width: 100%" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="ttitle">日期</td>
            <td rowspan="2" class="ttitle">姓名</td>
             <td rowspan="2" class="ttitle">翻身时间</td>
              <td colspan="3" style="width: 20%">卧位</td>
              <td colspan="4" style="width: 30%">皮肤状况</td>
              <td rowspan="2" class="ttitle">操作者</td>

            </tr>
         <tr>
              <td>左</td>
              <td>右</td>
             <td>仰</td>
              <td>正常</td>
              <td>发红</td>
              <td>表皮破</td>
          <td>溃烂</td>

            </tr>
        </thead>
         <tbody>
        <tr v-for="item in list">
            <td style="font-size: 14px"> {{new Date()| parseTime('{y}-{m}-{d}')}}</td>
            <td style="width: 10%;font-size: 14px">{{item.elderlyName}}</td>
            

            <td style="font-size: 14px">
        <span v-if="item.actualExecutionTime">  {{item.actualExecutionTime| parseTime('{y}-{m}-{d}')}} </span>  </td>
        <td style="width: 5%;font-size: 14px" >

          <span v-if="item.lyingPosition==1">√</span>




        </td>
         <td style="width: 5%;font-size: 14px" >
                     <span v-if="item.lyingPosition==2">√</span>
         </td>

           <td style="width: 5%;font-size: 14px" >
                  <span v-if="item.lyingPosition==3">√</span>
      </td>
        <td style="width: 5%;font-size: 14px" >

          <span v-if="item.skinCondition==1">√</span>
        </td>

          <td style="font-size: 14px">
        <span v-if="item.skinCondition==2">√</span>
      </td>
         <td style="font-size: 14px">
        <span v-if="item.skinCondition==3">√</span>
      </td>
           <td style="font-size: 14px">
        <span v-if="item.skinCondition==4">√</span>
      </td>
        <td style="width: 5%;font-size: 14px" >

          {{item.executorName}}
        </td>
          </tr>
      </tbody>




      </table>
    </div>

  </div>
</template>


<script>
    import {searchTurnOverRecord} from "../../api/turnoverrecords";
    import { searchelderlycondition,turnover } from "@/api/turnoverrecords"
    import { parseTime} from "@/utils/index";
    import Print from '@/utils/print'
    import Vue from 'vue'
    Vue.use(Print)
    export default {
        name: "Turnoverrecords",
        filters:{
            parseTime: parseTime
        },
        data(){
            return{
                tableData:[],
                background:true,
                listLoading:false,
                total:0,
                list:[],
                form:{
                    checkInMark:[

                    ]
                },
                queryForm:{
                    limit:10,
                    currPageNo:1,
                    checkInMark:'',
                    listTimeStart:new Date(),
                    listTimeEnd:new Date(),
                },
                turnForm:{
                    institutionNumber:"",
                    checkInMark:'',
                    listTimeStart:new Date(),
                    listTimeEnd:new Date(),
                },
                options:[

                ],
                value1:[new Date(),new Date()]
            }

        },
        methods: {
            searchTurnOverRecord(){
                console.log(this.queryForm)
                searchTurnOverRecord(this.queryForm).then(res =>{

                    this.tableData=res.data.data
                    this.total=res.data.total

                })
                this.turnForm.checkInMark=this.queryForm.checkInMark
                this.turnForm.listTimeStart=this.queryForm.listTimeStart
                this.turnForm.listTimeEnd=this.queryForm.listTimeEnd
                this.turnForm.institutionNumber=localStorage.getItem('institutionNumber')
                turnover(this.turnForm).then(res =>{
                    console.log(res)
                    this.list=res.data



                })

            },
            stamp(size){
                if(this.list){
                    this.$print(this.$refs.print, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }
            },
            changetime(value){
                console.log(value)
                if(this.value1){
                    this.queryForm.listTimeStart=value[0]
                    this.queryForm.listTimeEnd=value[1]
                }else {
                    this.queryForm.listTimeStart=new Date()
                    this.queryForm.listTimeEnd=new Date()
                }

            },
            change(value){
                console.log(value)
                this.queryForm.checkInMark=value
            },
            remoteMethod(query) {
                this.options=[]
                console.log(query)
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        let elderlycondition=query
                        searchelderlycondition({elderlycondition}).then(res =>{

                            if(res.data){
                                for(let i=0;i<res.data.length;i++){
                                    if(res.data[i].retreat==false){
                                        console.log(res.data[i])
                                        this.options.push(res.data[i])
                                    }
                                }
                            }






                        })
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.searchTurnOverRecord()


            },
            handleCurrentChange(val) {


                this.queryForm.currPageNo = val;
                this.searchTurnOverRecord()



            }

    },
    created() {
            this.searchTurnOverRecord()
    }
    }
</script>

<style scoped>
  .mytables{
    display: none ;
    padding-top: 10px;

  }
  .mytable
  {

    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  .mytable td, table th
  {
    border: 1px solid rgba(59,65,81,.3);
    height: 40px;
  }
  .mytable .ttitle
  {
    background-color: #F5FAFA;
    width: 10%;
  }
  .mytable tr:nth-child(odd)
  {
    background: #fff;
  }
  .mytable .datalist{
    width: 30%;

  }
</style>
